<template>
	<view class="u-rela">
		<!-- 古村印象 -->
		<u-swiper class="page-bg" height="500" :list="list"></u-swiper>
		<view class="page-wrap">
			<div class="u-flex">
				<text class="u-font-44 blod u-m-l-15 u-flex-1">{{ dataList.title }}</text>
			</div>
			<view class="desc" v-html="dataList.content">
				<!-- 古镇上名胜古迹很多。长约2公里的上清古街上有长庆坊、留候家庙、天师府、留候第、天源德药栈、天主教堂等景点。沿河栉比鳞次的吊脚楼和船埠头更让小镇显现出江南水乡的风格。河畔浣纱村妇、捣衣少女、戏水孩童，以及渔舟片片、白鸭浮水形成了一条韵味十足的古镇风景线。镇东面有上清宫、东岳宫，东北面有南宋（1127-1279年）四大书院之一的象山书院，泸溪河对岸有明朝（1368-1644年）宰相夏言的故里——桂洲村及第二次国内革命战争时红十一军和中央红军会师之处。
				      在距古镇4公里的地方，还有天门山生态游览区。那里有原始森林、瀑布群以及一些古民居。
				      天师府占地5万平方米，有500多间房舍。楼台殿阁金碧辉煌，曲径回廊不计其数，府内古木参天，是历代张天师的起居之所。天师府原建于龙虎山下，后迁于上清。
				      张道陵是中国道教创始人，后人尊他为张天师，而张天师的名号也被历代帝王特许世袭。张天师已经是张道陵的第63代孙了。
					        古镇上名胜古迹很多。长约2公里的上清古街上有长庆坊、留候家庙、天师府、留候第、天源德药栈、天主教堂等景点。沿河栉比鳞次的吊脚楼和船埠头更让小镇显现出江南水乡的风格。河畔浣纱村妇、捣衣少女、戏水孩童，以及渔舟片片、白鸭浮水形成了一条韵味十足的古镇风景线。镇东面有上清宫、东岳宫，东北面有南宋（1127-1279年）四大书院之一的象山书院，泸溪河对岸有明朝（1368-1644年）宰相夏言的故里——桂洲村及第二次国内革命战争时红十一军和中央红军会师之处。
					        在距古镇4公里的地方，还有天门山生态游览区。那里有原始森林、瀑布群以及一些古民居。
					        天师府占地5万平方米，有500多间房舍。楼台殿阁金碧辉煌，曲径回廊不计其数，府内古木参天，是历代张天师的起居之所。天师府原建于龙虎山下，后迁于上清。
					        张道陵是中国道教创始人，后人尊他为张天师，而张天师的名号也被历代帝王特许世袭。张天师已经是张道陵的第63代孙了。 -->
			</view>

		</view>
		<!-- 留言 -->
		<view class="msg-wrap">
			<view class="u-flex">
				<image class="icon-comment"
					src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-comment.png" mode="widthFix">
				</image>
				<text class="u-font-36 blod u-m-l-15">留言</text>
			</view>
			<div class="list">
				<div class="item" v-for="item in commentList" :key="item.message_id">
					<image
						:src="item.userinfo.avatar =='' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-avatar.png' : item.userinfo.avatar"
						mode="widthFix"></image>
					<div class="u-font-28 blod">{{ item.userinfo.nickname }}</div>
					<text class="u-font-24 u-tips-color">{{ item.time }}</text>
					<view class="u-font-28 u-m-t-30">{{ item.content }}</view>
				</div>
				<!-- <div class="item">
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-avatar.png" mode="widthFix"></image>
					<div class="u-font-28 blod">游客_ODA5NEwmj</div>
					<text class="u-font-24 u-tips-color">2023-05-30 16:50</text>
					<view class="u-font-28 u-m-t-30">地方很美，偶尔远离大城市的喧嚣看看乡下美景，
						别有一番滋味</view>
				</div> -->
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [
					// {
					// 	image: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-1.png',
					// },
					// {
					// 	image: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-1.png',
					// },
					// {
					// 	image: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-1.png',
					// }
				],

				dataList: {},

				commentList: [], //评论列表
			}
		},
		onLoad(options) {
			console.log(options);

			// 古村印象
			this.get_villages_ancient(options.id)

			// 评论列表
			this.get_comment_index(options.id)
		},
		methods: {
			// 古村印象
			get_villages_ancient(village_id) {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.villages_ancient,
					method: 'GET',
					data: {
						village_id
					}
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						this.dataList = res.data
						this.list.push({
							image: this.dataList.thumbnail
						})
					}
				})
			},

			// 评论列表
			get_comment_index(id) {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.comment_index,
					method: 'GET',
					data: {
						type: 5,
						target_id: id
					}
				}).then(res => {
					console.log(res, '评论列表');
					if (res.code == 1) {
						uni.hideLoading();
						this.commentList = res.data.list
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-swiper-indicator {
		bottom: 70rpx !important;
	}

	.page-bg {
		position: relative;
		width: 750rpx;
		height: 500rpx;
		z-index: 1;
	}


	.page-wrap {
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: -50rpx;
		position: relative;
		z-index: 2;
	}

	.desc {
		font-size: 28rpx;
		margin-top: 44rpx;
		text-indent: 2em;
		line-height: 48rpx;
	}

	.msg-wrap {
		background: #fff;
		padding: 30rpx;
		margin-top: 20rpx;

		.icon-comment {
			width: 36rpx;
			height: 36rpx;
		}

		.list {

			.item {
				display: grid;
				grid-template-columns: 68rpx 1fr;
				gap: 0 20rpx;
				border-bottom: 1px solid #E6E6E6;
				margin-top: 40rpx;
				padding-bottom: 60rpx;

				image {
					width: 68rpx;
					height: 68rpx;
					grid-row: 1/4;
				}

				&:last-of-type {
					border: 0;
				}

			}
		}
	}
</style>
<style>
	page {
		padding: 0;
	}
</style>